<template>
  <div v-loading="loading" class="account-wrapper">
    <div class="account-body">
      <section class="account-top">
        <div class='top_left'>
          <span class="left1">
            <el-input
              type="text"
              clearable
              placeholder='请输入用户姓名'
              v-model='searchInfo.keyword'>
            </el-input>
          </span>
          <span class="left1 ml16">
            <el-select
              clearable
              filterable
              v-model="searchInfo.tenantId"
              placeholder="请选择租户">
              <el-option v-for='item in tenantList'
                :key='item.tenantId'
                :label='item.tenantName'
                :value='item.tenantId'>
              </el-option>
            </el-select>
          </span>
          <span class="search-btn ml10"
            @click="handleSearch()">查询</span>
        </div>
        <div class="right1">
          <type-button size='small'  type='add' @handleClick="startAddUser()"></type-button>
        </div>
      </section>
      <div class="table-wrapper">
        <section :style='{height: tableHeight}'>
          <el-table :data="accountList"
                  tooltip-effect='light'
                  style="width: 100%">
            <el-table-column show-overflow-tooltip
                              prop="name"
                              min-width='80'
                              label="姓名">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="tenantName"
                              min-width='120'
                              label="租户">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="account"
                              min-width='110'
                              label="手机">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="email"
                              min-width='150'
                              label="邮箱">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="wechaId"
                              min-width='150'
                              label="微信号">
            </el-table-column>
            <el-table-column show-overflow-tooltip
                              prop="roleName"
                              min-width='110'
                              label="角色">
            </el-table-column>
            <el-table-column fixed="right"
                              label="操作"
                              width='160px'>
              <template slot-scope="scope">
                <!-- <span class="caozuo" @click="handleViewAuth(scope.row)">ta的权限</span> -->
                <span class='caozuo' @click='toggleUse(scope.row)'>{{scope.row.isEnabled ? '禁用' : '启用'}}</span>
                <span class="caozuo" @click="handleEdit(scope.row)">编辑</span>
                <span class="caozuo" @click="handleDelete(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </section>
        <el-pagination
          style="width:100%;text-align:center;"
          background
          v-show='accountList.length'
          :total="total"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="pageSizesG"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next">
        </el-pagination>
      </div>
    </div>
    <!-- 新增/编辑账户 -->
    <drawer size='700px'
            :title='mode === "create" ? "添加账户" : "编辑账户"'
            :visible="isEditAccount"
            @beforeClose="beforeClose('isEditAccount')"
            @closeDrawer="clearAddUserFields">
      <div slot="body">
        <!-- 添加账户 -->
        <div v-show='mode === "create"'>
          <el-form :model="newAccount"
                   :rules="addRules"
                   ref="addStaff"
                   label-width="104px"
                   class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
              <el-input
                placeholder="请输入姓名"
                maxlength="20"
                show-word-limit
                v-model.trim="newAccount.name">
              </el-input>
            </el-form-item>
            <el-form-item label="账号" prop="account">
              <el-input placeholder="请输入账号"
                        v-model.trim="newAccount.account"
                        oninput="this.value=this.value.replace(/\D/g,'')"
                        maxlength="11">
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                placeholder="请输入密码"
                v-model.trim="newAccount.password"
                show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passwords">
              <el-input placeholder="请再次输入密码"
                v-model.trim="newAccount.passwords"
                show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input placeholder="请输入邮箱"
                        v-model.trim="newAccount.email">
              </el-input>
            </el-form-item>
            <el-form-item
              label="租户"
              prop="tenantId">
              <span class="form-select-box">
                <el-select
                  clearable
                  filterable
                  multiple
                  v-model="newAccount.tenantId"
                  placeholder="请选择租户">
                  <el-option v-for='item in tenantList'
                    :key='item.tenantId'
                    :label='item.tenantName'
                    :value='item.tenantId'>
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
            <!-- <el-form-item label="角色" prop="posOption">
              <el-select v-model="newAccount.posOption"
                        multiple
                        placeholder="请选择">
                <el-option v-for="item in posOptions"
                           :key="item.roleId"
                           :label="item.roleName"
                           :value="item.roleId">
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="员工" prop="userId">
              <el-select v-model="newAccount.userId"
                         placeholder="请选择">
                <el-option v-for="item in empList"
                           :key="item.userId"
                           :label="item.userName"
                           :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
        </div>
        <!-- 编辑账户 -->
        <div v-show='mode === "edit"'>
          <el-form :model="accountData"
                   :rules="editRules"
                   ref="editStaff"
                   label-width="104px"
                   class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
              <el-input
                placeholder="请输入姓名"
                maxlength="20"
                show-word-limit
                v-model.trim="accountData.name">
              </el-input>
            </el-form-item>
            <el-form-item label="账号" prop="account">
              <el-input placeholder="请输入账号"
                        :disabled="true"
                        v-model.trim="accountData.account"
                        oninput="this.value=this.value.replace(/\D/g,'')"
                        maxlength="11">
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                placeholder="输入密码进行修改"
                v-model.trim="accountData.password"
                show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passwords">
              <el-input placeholder="请再次输入修改密码"
                v-model.trim="accountData.passwords"
                show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input placeholder="请输入邮箱"
                        v-model.trim="accountData.email">
              </el-input>
            </el-form-item>
            <el-form-item
              label="租户"
              prop="tenantId">
              <span class="form-select-box">
                <el-select
                  clearable
                  filterable
                  multiple
                  v-model="accountData.tenantId"
                  placeholder="请选择租户">
                  <el-option v-for='item in tenantList'
                    :key='item.tenantId'
                    :label='item.tenantName'
                    :value='item.tenantId'>
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
            <!-- <el-form-item label="角色" prop="posOption">
              <el-select v-model="accountData.posOption"
                         multiple
                         placeholder="请选择">
                <el-option v-for="item in posOptions"
                           :key="item.roleId"
                           :label="item.roleName"
                           :value="item.roleId">
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="员工" prop="userId">
              <el-select v-model="accountData.userId"
                         placeholder="请选择">
                <el-option v-for="item in empList"
                           :key="item.userId"
                           :label="item.userName"
                           :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
        </div>
      </div>
      <template slot="footer">
        <el-button size="small" type="primary" @click="saveAccount">确 定</el-button>
        <el-button size="small" @click="isEditAccount = false">取 消</el-button>
      </template>
    </drawer>
    <!-- 查看用户权限 -->
    <!-- <el-dialog
      width="900px"
      :title="`${currUserInfo.name}的权限`"
      :visible.sync="isShowAuthInfo">
      <div class="auth-list">
        <el-table
          class="table-border"
          :data="authList"
          tooltip-effect='light'>
          <el-table-column
            type="index"
            label="序号"
            width="160px">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="type"
            min-width='80px'
            label="类型">
            <template slot-scope="scope">
              {{scope.row.type | handleAccountType}}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="modeName"
            min-width='110px'
            label="账号名称">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="primit"
            min-width='110px'
            label="权限范围">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="roleName"
            min-width='110px'
            label="角色">
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:18px!important;"
          background
          :page-size="pageSizeAuth"
          :page-sizes="pageSizesG"
          @size-change="handleSizeAuthChange"
          :current-page="pageAuth"
          @current-change="handleCurrentAuthChange"
          layout="sizes, prev, pager, next"
          :total="countAuth">
        </el-pagination>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import TypeButton from '@/public/typeButton'
import Drawer from '@/public/Drawer'
export default {
  name: 'accountList',
  components: {
    TypeButton,
    Drawer
  },
  data () {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        callback(new Error('必填'))
      } else if (value) {
        let re = /^1\d{10}$/
        let result = re.test(value)
        if (!result) {
          callback(new Error('手机号码不正确'))
        } else {
          callback()
        }
      }
    }
    var validateEmail = (rule, value, callback) => {
      /* eslint-disable no-useless-escape */
      let res = /\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+/
      if (!value) {
        callback(new Error('请输入邮箱'))
      } else if (!res.test(value)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }
    let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,20}$/
    var validatePass1 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码必须是8-20位字母、数字或字符，至少包含两种！'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码必须是8-20位字母、数字或字符，至少包含两种！'))
      } else if (value !== this.newAccount.password) {
        callback(new Error('密码与确认密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      isLoading: false, // 防抖
      isEditAccount: false,
      // 筛选条件
      searchInfo: {
        keyword: '',
        tenantId: ''
      },
      page: 1,
      pageSize: 10,
      total: 0,
      accountList: [],
      tableHeight: '200px',
      // 添加编辑账户相关
      mode: 'create',
      posOptions: [], // 角色列表
      // empList: [], // 员工列表
      tenantList: [], // 租户列表
      accountData: {
        accountId: '',
        name: '',
        account: '',
        password: '',
        passwords: '',
        email: '',
        tenantId: []
        // posOption: []
        // userId: ''
      },
      newAccount: {
        name: '',
        account: '',
        password: '',
        passwords: '',
        email: '',
        tenantId: []
        // posOption: []
        // userId: ''
      },
      addRules: {
        name: [{ required: true, min: 2, max: 64, message: '必填,支持2~64个字符', trigger: 'blur' }],
        password: [{ validator: validatePass1, trigger: 'blur' }],
        passwords: [{ validator: validatePass2, trigger: 'blur' }],
        account: [{ required: true, validator: checkTel, message: '必填,请输入正确的手机号', trigger: 'blur' }],
        email: [{required: true, validator: validateEmail, trigger: 'blur'}],
        tenantId: [{ required: true, message: '请选择租户', trigger: 'change' }]
        // posOption: [{ required: true, message: '必填,请选择角色', trigger: 'change', type: 'array' }]
        // userId: [{ required: true, message: '必填,请选择员工', trigger: ['blur', 'change'] }]
      },
      editRules: {
        name: [{ required: true, min: 2, max: 64, message: '必填,支持2~64个字符', trigger: 'blur' }],
        // password: [{ min: 6, max: 64, message: '支持6~64个字符', trigger: 'blur' }],
        // passwords: [{ min: 6, max: 64, message: '支持6~64个字符', trigger: 'blur' }],
        account: [{ required: true, validator: checkTel, message: '必填,请输入正确的手机号', trigger: 'blur' }],
        email: [{required: true, validator: validateEmail, trigger: 'blur'}],
        tenantId: [{ required: true, message: '请选择租户', trigger: 'change' }]
        // posOption: [{ required: true, message: '必填,请选择角色', trigger: 'change', type: 'array' }]
        // userId: [{ required: true, message: '必填,请选择员工', trigger: ['blur', 'change'] }]
      }
      // // 查看用户权限相关
      // isShowAuthInfo: false,
      // currUserInfo: {},
      // pageAuth: 1,
      // pageSizeAuth: 10,
      // countAuth: 0,
      // authList: []
    }
  },
  methods: {
    // // 显示用户权限
    // handleViewAuth (info) {
    //   this.currUserInfo = {
    //     name: info.name,
    //     accountId: info.accountId
    //   }
    //   this.pageAuth = 1
    //   this.authList = []
    //   this.fetchAuthList()
    //   this.isShowAuthInfo = true
    // },
    // // 获取用户权限列表
    // fetchAuthList () {
    //   let url = `/user/account/permit/${this.currUserInfo.accountId}`
    //   let params = {
    //     currentPage: this.pageAuth,
    //     pageSize: this.pageSizeAuth
    //   }
    //   this.get(url, params).then(res => {
    //     if (res.data.code === 200) {
    //       let data = res.data.data
    //       if (data) {
    //         this.countAuth = +data.total
    //         if (data.list && data.list.length) {
    //           this.authList = data.list
    //         } else {
    //           this.authList = []
    //         }
    //       } else {
    //         this.authList = []
    //       }
    //     }
    //   }).catch(err => {
    //     this.handleError(err)
    //   })
    // },
    // handleSizeAuthChange (val) {
    //   this.pageAuth = 1
    //   this.pageSizeAuth = val
    //   this.fetchAuthList()
    // },
    // handleCurrentAuthChange (val) {
    //   this.pageAuth = val
    //   this.fetchAuthList()
    // },
    // 显示添加账户
    startAddUser () {
      this.mode = 'create'
      this.isEditAccount = true
      // this.getEmpList()
    },
    // 显示编辑账户
    handleEdit (account) {
      this.mode = 'edit'
      this.getUserDetail(account)
      // this.getEmpList(account.userId)
    },
    // 获取账户详情
    getUserDetail (account) {
      let url = `${this.SERVICE_TENANT}/account/${account.accountId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.assignKey(this.accountData, data)
            // let posOption = data.roles.map(info => {
            //   return info.roleId
            // })
            // this.accountData.posOption = posOption
            this.accountData.password = ''
            this.accountData.passwords = ''
            this.isEditAccount = true
          }
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 保存账户信息
    saveAccount () {
      // 添加账户
      if (this.mode === 'create') {
        this.$refs.addStaff.validate((valid) => {
          if (valid) {
            if (this.isLoading) {
              return
            }
            this.isLoading = true
            let url = `${this.SERVICE_TENANT}/account/add`
            let param = {
              name: this.newAccount.name,
              account: this.newAccount.account,
              password: this.newAccount.password,
              email: this.newAccount.email,
              tenantId: this.newAccount.tenantId
              // roleIds: this.newAccount.posOption
              // userId: this.newAccount.userId
            }
            this.posts(url, param).then(res => {
              this.isLoading = false
              if (res.data.code === 200) {
                this.showSucc(res.data.message)
                this.isEditAccount = false
                this.getAccountList()
              }
            }).catch(e => {
              this.isLoading = false
              this.handleError(e)
            })
          }
        })
      // 编辑账户
      } else if (this.mode === 'edit') {
        this.$refs.editStaff.validate((valid) => {
          if (valid) {
            // 如果填写了密码，则判断密码是否符合规则
            let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,20}$/
            if (this.accountData.password && !reg.test(this.accountData.password)) {
              return this.showWarnMsg('密码必须是8-20位字母、数字或字符，至少包含两种！')
            }
            if (this.accountData.password && !this.accountData.passwords) {
              return this.showWarnMsg('请输入确认密码')
            }
            if (this.accountData.passwords && !reg.test(this.accountData.passwords)) {
              return this.showWarnMsg('密码必须是8-20位字母、数字或字符，至少包含两种！')
            }
            // 如果填写了密码，则判断是否相同
            if ((this.accountData.password && this.accountData.passwords) && this.accountData.password !== this.accountData.passwords) {
              return this.showWarnMsg('新密码与确认密码不一致')
            }
            let url = `${this.SERVICE_TENANT}/account/${this.accountData.accountId}`
            let param = {
              accountId: this.accountData.accountId,
              name: this.accountData.name,
              account: this.accountData.account,
              password: this.accountData.password || null,
              email: this.accountData.email,
              tenantId: this.accountData.tenantId
              // roleIds: this.accountData.posOption
              // userId: this.accountData.userId
            }
            if (this.isLoading) {
              return
            }
            this.isLoading = true
            this.posts(url, param).then(res => {
              this.isLoading = false
              if (res.data.code === 200) {
                this.showSucc(res.data.message)
                this.isEditAccount = false
                this.getAccountList()
              }
            }).catch(e => {
              this.isLoading = false
              this.handleError(e)
            })
          }
        })
      }
    },
    // 重置账户信息
    clearAddUserFields () {
      this.$refs.addStaff && this.$refs.addStaff.resetFields()
      this.$refs.editStaff && this.$refs.editStaff.resetFields()
      this.newAccount = {
        name: '',
        account: '',
        password: '',
        passwords: '',
        email: '',
        tenantId: ''
        // posOption: []
        // userId: ''
      }
      this.accountData = {
        accountId: '',
        name: '',
        account: '',
        password: '',
        passwords: '',
        email: '',
        tenantId: ''
        // posOption: []
        // userId: ''
      }
    },
    beforeClose (name) {
      this[name] = false
    },
    // 删除账户
    handleDelete (account) {
      if (this.isLoading) {
        return
      }
      this.$confirm('确认删除该账户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.isLoading = true
        let url = `${this.SERVICE_TENANT}/account/invalid/${account.accountId}`
        this.posts(url).then(res => {
          this.isLoading = false
          if (res.data.code === 200) {
            this.showSucc(res.data.message)
            this.getAccountList()
          }
        }).catch(e => {
          this.isLoading = false
          this.handleError(e)
        })
      }).catch(e => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    // 启用/禁用用户
    toggleUse (account) {
      let tip = account.isEnabled ? '确定禁用该账户吗？' : '确定启用该账户吗？'
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.isLoading) {
          return
        }
        this.isLoading = true
        let url = ''
        if (account.isEnabled) {
          url = `${this.SERVICE_TENANT}/account/disable/${account.accountId}`
        } else {
          url = `${this.SERVICE_TENANT}/account/enabled/${account.accountId}`
        }
        this.posts(url).then(res => {
          this.isLoading = false
          if (res.data.code === 200) {
            this.showSucc(res.data.message)
            this.getAccountList()
          }
        }).catch(e => {
          this.isLoading = false
          this.handleError(e)
        })
      }).catch(e => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    // 获取账户列表
    getAccountList () {
      this.loading = true
      let param = {
        keyword: this.searchInfo.keyword || null,
        tenantId: this.searchInfo.tenantId || null,
        currentPage: this.page,
        pageSize: this.pageSize
      }
      let url = `${this.SERVICE_TENANT}/account/list`
      this.get(url, param).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          if (data && data.list && data.list.length) {
            this.total = +data.total
            this.accountList = data.list
          } else {
            this.accountList = []
          }
          this.tableHeight = this.accountList && this.accountList.length ? (this.accountList.length + 1) * 50 + 3 + 'px' : '200px'
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    handleSearch () {
      this.page = 1
      this.getAccountList()
    },
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.getAccountList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getAccountList()
    },
    // // 获取角色选项
    // fetchRoleGroups () {
    //   let url = `${this.SERVICE_ROLE}/group`
    //   this.get(url).then(res => {
    //     this.posOptions = []
    //     if (res.data.code === 200 && res.data.data) {
    //       let groups = res.data.data
    //       groups.forEach(group => {
    //         let roles = group.children
    //         roles.forEach(role => {
    //           this.posOptions.push({ roleId: role.roleId, roleName: role.roleName })
    //         })
    //         // // 只获取角色组
    //         // if (group.roleGroupCode === '001') {
    //         //   let roles = group.children
    //         //   // 只获取角色组中的默认角色选项
    //         //   let acceptRoleIds = ['1', '2', '3', '4', '5']
    //         //   roles.forEach(role => {
    //         //     if (acceptRoleIds.filter(id => id === role.roleId)[0]) {
    //         //       this.posOptions.push({ roleId: role.roleId, roleName: role.roleName })
    //         //     }
    //         //   })
    //         // }
    //       })
    //     }
    //   }).catch(e => {
    //     this.handleError(e)
    //   })
    // },
    // 获取员工选项
    // getEmpList (userId) {
    //   let url = `/org/emp/list`
    //   let params = {}
    //   if (userId) {
    //     params.userId = userId
    //   }
    //   this.get(url, params).then(res => {
    //     if (res.data.code === 200) {
    //       let data = res.data.data
    //       if (data && data.list && data.list.length) {
    //         this.empList = data.list
    //       } else {
    //         this.empList = []
    //       }
    //     }
    //   }).catch(err => {
    //     this.handleError(err)
    //   })
    // }
    // 获取租户列表
    fetchTenantList () {
      let url = `${this.SERVICE_TENANT}/search`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.tenantList = data
          } else {
            this.tenantList = []
          }
        }
      }).catch(err => {
        this.handleError(err)
      })
    }
  },
  filters: {
    handleAccountType (type) {
      switch (Number(type)) {
        case 1:
          return '订阅号'
        case 2:
          return '服务号'
        case 3:
          return '企业号'
        default:
          break
      }
    }
  },
  created () {
    this.getAccountList()
    this.fetchTenantList()
    // this.fetchRoleGroups()
    // this.getEmpList()
  }
}
</script>
<style lang="stylus" scoped>
.account-wrapper
  width 100%
  height 100%
  .account-body
    width 100%
    min-height 100%
    font-size 12px
    overflow-y auto
    background #f2f2f6
    padded_box(border-box, 6px)
    border-radius 6px
    .account-top
      between()
      width 100%
      background #fff
      padded_box(border-box, 15px 20px)
      border-radius 6px
      margin-bottom 6px
      .top_left
        display flex
        align-items  center
        >>> .el-input
          width 200px
          height 30px
          line-height 30px
        >>> .el-input__inner
          width 100%
          height 100%
          line-height 30px
        >>> .el-date-editor
          height 30px
          width 200px
        >>> .el-select .el-input__icon
          line-height 30px
        .left-label
          font-size: 12px;
          color: #5E5E66;
          margin-right 16px
        .left1
          font-size 0
          .search-input
            width 100%
        .left2
          margin 0 6px
        .search-btn
          color #3496FF
          cursor pointer
          font-size 12px
        .reset
          color #22242F
          cursor pointer
          font-size 12px
          margin-left 13px
      .right1
        flex .5
        right1()
        font-size 0
        >>> .el-input
          width 281px
    .table-wrapper
      background: #fff;
      box-sizing: border-box;
      padded_box(border-box, 15px 20px);
      border-radius: 6px;
      .status-wrapper
        display flex
        align-items center
        .icon
          width 24px
          height 24px
          background-repeat no-repeat
          background-position center
          background-size 100%
          margin-right 6px
          &.draft
            background-image url('~assets/img/enterprise/ic_draft@2x.png')
          &.complete
            background-image url('~assets/img/enterprise/icon_complete@2x.png')
            background-size 18px
        .text
          font-size: 14px;
          color: #888B9C;
      .caozuo
        display inline-block
        color #3496FF
        font-size 12px
        cursor pointer
        &.delete
          color #FA376C
        &.stop
          color #FF7E40
      .caozuo + .caozuo
        margin-left 20px
// 用户权限列表
// >>> .el-dialog__wrapper
//   display flex
//   justify-content center
//   align-items center
//   .el-dialog
//     margin 0 auto !important
// .auth-list
//   >>> .el-table
//     th
//       height 46px
//       line-height 46px
//       font-size 12px
//       &:first-child
//         padding-left 20px
//     td
//       padding 5px 0
//       height 46px
//       line-height 46px
//       font-size 12px
//       .cell
//         color #5E5E66 !important
//       &:first-child
//         padding-left 20px
//   .table-btn
//     font-size 12px
// 添加编辑账号
.demo-ruleForm
  .form-select-box
    width 360px
    height: auto;
    min-height: 36px;
    >>>.el-input__inner
      min-height: 36px !important
</style>
